<!--demo/搜索表单-->
<template>
  <div class="userMan gk-content">
    <gk-title :gkTitle="'搜索表单'" />
    <!-- <search-form
      :data="searchContent"
      @searchForm="onSubmit"
      @resetForm="onClear"
    /> -->
    <el-editable
      class="el-table"
      :data="tableData"
      height="200"
      v-loading="tableLoading"
      :columns="userManagement"
    >
    </el-editable>
    <el-pagination
      class="pagination"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="PAGE_NUMBER"
      :page-size="pageSize"
      :layout="PAGINATION_LAYOUT"
      :total="total"
    />
  </div>
</template>
<script>
import ElEditable from '@components/gk/el-editable/index.vue'
// import searchForm from '@m_components/m-search/index.vue'
import GkTitle from '@components/gk/title/index.vue'
import {PAGE_NUMBER, PAGINATION_LAYOUT} from '@const/common.js'
// import {
//   userManagement,
//   approveStatus,
//   defaultConfigData,
//   searchContent,
//   sendThis,
// } from './const.js'
import {
  authGroupPageList, // 分页查询用户组
  commonGetAllEnums // 通用枚举值
} from '@const/api_staffCenter.js'
import {hasIn} from 'lodash'
export default {
  name: 'UserMan',
  components: {ElEditable, GkTitle},
  data() {
    return {
      approveStatus,
      companyTypeData: [],
      defaultConfigData,
      curPage: 1,
      PAGE_NUMBER, // 页码
      PAGINATION_LAYOUT, // 分页功能
      pageSize: PAGE_NUMBER[0], // 一页的数量
      userManagement, // 表头信息
      total: 0, // 总页数
      searchContent,
      tableData: [], // 表格数据
      // 查询的条件数据
      searchForm: {
        keword: '',
        status: '',
        companyType: ''
      },
      // 编辑用户组
      editForm: {
        id: '',
        name: '',
        remark: '',
        defaultConfig: '',
        companyType: ''
      },
      addUserLoading: false,
      dialogVisibleEdit: false,
      editFormRules: {
        name: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        defaultConfig: [{required: true, message: '请选择', trigger: 'blur'}],
        companyType: [
          {required: true, message: '请选择企业类型', trigger: 'blur'}
        ]
      },
      isEdit: false, // 新增true 编辑false
      tableLoading: false,
      userDialog: {
        visible: false,
        loading: false,
        btnLoading: false,
        checkList: [],
        searchKey: '',
        userList: []
      },
      searchQuery: {
        name: '',
        companyType: '',
        status: ''
      }
    }
  },
  created() {
    this.getAllEnums()
    this.search()
  },
  mounted(){
    sendThis(this)
    clearTimeout(this.timeout)
  },
  methods: {
    search() {
      this.tableLoading = true
      this.$axios({
        method: 'GET',
        url: `${authGroupPageList}?page=${this.curPage}&pageSize=${this.pageSize}&name=${this.searchQuery.name}&companyType=${this.searchQuery.companyType}&status=${this.searchQuery.status}`
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.tableData = data.content ? data.content : []
          this.total = data.totalElements ? data.totalElements : 0
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    getAllEnums() {
      this.$axios({
        method: 'GET',
        url: commonGetAllEnums
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.searchContent[1].options = data.companyTypeEnum
          this.companyTypeData = data.companyTypeEnum
        })
        .finally(() => {})
    },
    closeDialog() {
      this.resetForm()
      this.dialogVisibleEdit = false
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs.editForm.resetFields()
      })
    },
    // 清空查询条件
    onClear() {
      this.searchForm = {name: '', status: '', companyType: ''}
    },
    onSubmit(data) {
      console.log('formData160', data)
      this.curPage = 1
      data.name = data.name === null ? '' : data.name
      data.companyType = data.companyType === null ? '' : data.companyType
      data.status = data.status === null ? '' : data.status
      this.searchQuery = data
      this.search()
    },
    // 更改页码大小
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.search()
    },
    // 更改当前页
    handleCurrentChange(curPage) {
      this.curPage = curPage
      this.search()
    }
  }
}
</script>
<style lang="less" scoped>
// 新业务覆盖样式
.default-box {
  .main-container {
    .nuxt-main {
      .nuxt-content {
        background: none;
        .gk-content {
          // vue文件最外层div
          padding: 0;
          background: #f7f8fa;
          .pagination {
            padding: 10px 0;
            background: #fff;
          }
        }
      }
    }
  }
}
.userMan {
  display: flex;
  flex-direction: column;
  .addBtn {
    margin-bottom: 15px;
  }
  .dialog-box {
    .el-input--medium {
      width: 100%;
    }
    .el-select--medium {
      width: 100%;
    }
  }
  .el-table {
    flex: 1;
    padding: 8px;
  }
  .dialog-new-btn {
    float: right;
    margin-bottom: 10px;
  }
  .add-company-dialog {
    height: 500px;
    display: flex;
    flex-direction: column;
    .dialog-checked-all {
      margin: 16px 0;
    }
    .checkbox-box {
      flex: 1;
      margin-top: 10px;
      margin-right: 10px;
      overflow: auto;
      .el-checkbox {
        display: block;
        margin-left: 0;
      }
    }
  }
}
.el-message--warning {
  z-index: 9999 !important;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
